Hugo: Markdown rendering inside nested shortcodes

Hugo is a static site generator from markdown, which I use for this blog and project site. Hugo has a template mechanism, Shortcodes, which allows users to use complicated HTML.

I had a problem that when I wrapped markdown with Shortcodes, the markdown is not converted to HTML anymore.

Shortcodes has 2 syntaxes;

  1. {{< Shortcodes Name >}}Something{{< /Shortcodes Name >}}
    • Internal sentences are treated as raw string (No conversion)
  2. {{% Shortcodes Name %}}Something{{% /Shottcodes Name %}}
    • Internal sentences are passed to markdown parser

(The behavior of the second % Shortcodes has been changed at Hugo v0.55, but the documentation is confusing and difficult to understand.)

Another problem came at Hugo v0.60, which change default markdown parser from Blackfriday to goldmark. The default configuration of goldmark ignores HTML input and emits <!-- raw HTML omitted -->.

That can be changed with config.toml

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

We can also manage without enabling unsafe = true.

First, create custom Shortcodes markdownify.html;

{{.Inner}}

Then, wrap internal markdown sentenses {{% markdownify %}}Somethig{{% /markdownify %}}.

Call other outside Shortcodes with < syntax.

References

Avatar
Hiroyuki Yamada

My research interests include machine learning, cloud native conputing.

Related